<template>
  <div class="home">
    <h2>{{ msg }}</h2>
    <p>
      <b>姓名：</b> 
      <span>{{ name }}</span>
    </p>
    <p>
      <b>age：</b> 
      <span>{{ age }}</span>
    </p>
    <p>
      <b>水果：</b> 
      <span>{{ fruit }}</span>
    </p>
    <p>{{nameAge}}</p>
    <button @click="changeAge">change age</button>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Home",
  data() {
    return {
      msg: "state、getter practice",
    };
  },
  computed: {
    name() {
      return this.$store.state.name;
    },
    ...mapState({
      nameAge(state) {
        return `${this.name}今年${state.age}了`;
      }
    }),
    ...mapState([
      "age",
      "fruit"
    ])
  },
  methods: {
    changeAge() {
      // this.$store.commit("changeAge", {age: '25'});
      this.$store.commit({
        type: "changeAge",
        age: "26"
      })
    }
  }
};
</script>
